<template>
	<view class="outside">
		<u-toast ref="uToast"></u-toast>
		<u-tabs :list="tabNameList" @click="tabClick"></u-tabs>
		<view class="container">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="productVoList.length==0"
				:text="emptyText">
			</u-empty>

			<view v-for="(productVo,index) in productVoList" class="item">
				<view class="productItem">
					<u--image v-if="productVo.picList!=null&&productVo.picList.length>0" :showLoading="true"
						:src="urlConstruct(productVo.picList[0].address)" width="200rpx" height="200rpx" radius="10" mode="aspectFill"
						:fade="true" duration="450" @click="seeProductDetail(productVo)">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view style="margin: 10rpx;"></view>
					<view class="productMessage" style="width: 100%;">
						<view @click="seeProductDetail(productVo)">
							<view class="productTitle">{{productVo.name}}</view>
							<view class="price">¥<text class="number">{{productVo.price}}</text></view>
						</view>
						<view style="display: flex; justify-content: space-between;align-items: center;width: 100%;">
							<view style="font-size: 28rpx;color: #B6B6B6;">
								{{formatDateToString(productVo.createTime)}}
							</view>
							<view style="display: flex;align-items: center;">
								<view class="buttonView" @click="editProduct(productVo)"
									style="border: #00BFFF solid 1px;color: #00BFFF;">编 辑</view>
								<view style="width: 15rpx;"></view>
								<view class="buttonView" @click="offShelf(productVo.id)"
									style="border: #FF5A5F  solid 1px;color: #FF5A5F;" v-if="productStatus==0">下 架
								</view>
								<view class="buttonView" @click="onShelf(productVo.id)"
									style="border: #76D7C4  solid 1px;color: #76D7C4;" v-if="productStatus==3">上 架
								</view>
								<view class="buttonView" @click="onShelf(productVo.id)" v-if="productStatus==2"
									style="border: #76D7C4  solid 1px;color: #76D7C4;">重新上架</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import {
		listProductVo,
		updateProduct
	} from "@/api/market/product.js";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";

	export default {
		data() {
			return {
				tabNameList: [{
					name: '在售',
				}, {
					name: '草稿',
				}, {
					name: '已下架'
				}],
				page: {
					pageNum: 1,
					pageSize: 10
				},
				productVoList: [],
				emptyText: '您还没有商品处于出售状态哟',
				// 商品状态 0：在售 1：售出 2：下架 3：草稿
				productStatus: 0,
			}
		},
		created() {
			this.listProductVo();
		},
		methods: {
			urlConstruct(url) {
				return picUrlConstruct(url);
			},
			tabClick(item) {
				// console.log('item', item);
				if (item.name == "在售") {
					this.emptyText = "您还没有商品处于出售状态哟";
					this.productStatus = 0;
				} else if (item.name == "草稿") {
					this.emptyText = "您的草稿箱是空的";
					this.productStatus = 3;
				} else if (item.name == "已下架") {
					this.emptyText = "您还没有下架过商品哟";
					this.productStatus = 2;
				}
				this.listProductVo();
			},
			/**
			 * 获取商品
			 */
			listProductVo() {
				listProductVo({
					userId: uni.getStorageSync("curUser").userId,
					status: this.productStatus
				}, this.page).then(res => {
					console.log("listProductVo:" + JSON.stringify(res))
					this.productVoList = res.data.pageMes.rows;
				})
			},
			/**
			 * 查看商品的详情
			 */
			seeProductDetail(productVo) {
				uni.navigateTo({
					url: "/pages/product/detail?productVo=" + encodeURIComponent(JSON.stringify(productVo))
				})
			},
			/**
			 * 格式化日期
			 * @param {Object} date
			 */
			formatDateToString(dateStr) {
				let date = new Date(dateStr);
				// 今天的日期
				let curDate = new Date();
				if (date.getFullYear() == curDate.getFullYear() && date.getMonth() == curDate.getMonth() && date
					.getDate() == curDate.getDate()) {
					// 如果和今天的年月日都一样，那就只显示时间
					return this.toDoubleNum(date.getHours()) + ":" + this.toDoubleNum(date.getMinutes());
				} else {
					// 如果年份一样，就只显示月日
					return (curDate.getFullYear() == date.getFullYear() ? "" : (date.getFullYear() + "-")) + this
						.toDoubleNum((
							date
							.getMonth() + 1)) +
						"-" +
						this.toDoubleNum(date.getDate());
				}
			},
			/**
			 * 如果传入的数字是两位数，直接返回；
			 * 否则前面拼接一个0
			
			 * @param {Object} num
			 */
			toDoubleNum(num) {
				if (num >= 10) {
					return num;
				} else {
					return "0" + num;
				}
			},
			/**
			 * 编辑商品
			 */
			editProduct(productVo) {
				uni.navigateTo({
					url: "/pages/sellMyProduct/sellMyProduct?productVo=" + encodeURIComponent(JSON.stringify(
						productVo))
				})
			},
			/**
			 * 下架商品

			 * @param {Object} productId
			 */
			offShelf(productId) {
				let product = {
					id: productId,
					status: 2
				};
				updateProduct(product).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "下架成功",
						duration: 500
					});
					this.listProductVo();
				})
			},
			/**
			 * 上架商品

			 * @param {Object} productId
			 */
			onShelf(productId) {
				let product = {
					id: productId,
					status: 0
				};
				updateProduct(product).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "上架成功",
						duration: 500
					});
					this.listProductVo();
				}).catch(err => {
					// console.log("err:" + JSON.stringify(err));
					this.$refs.uToast.show({
						type: 'error',
						message: err.msg,
						duration: 500
					});
				})
			},
			/**
			 * 跳转回来所执行的方法
			 */
			back() {
				// 重新获取一遍数据
				this.listProductVo();
			}
		}
	}
</script>

<style lang="scss">
	.outside {
		// background-color: #0093E9;
		// background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

		font-family: sans-serif;
	}

	.container {
		padding: 25rpx;

		.item {
			background: rgba(255, 255, 255, 1.0);
			border-radius: 5px;
			box-shadow: 10rpx 10rpx 20rpx rgba(234, 235, 236, 1.0),
				inset 1rpx 1rpx 1rpx rgba(234, 235, 236, 0.7);
			padding: 30rpx;
			margin-bottom: 30rpx;

			.productItem {
				display: flex;

				.productMessage {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.productTitle {
						font-weight: 500;
						margin-bottom: 10rpx;
						// color: #ffffff;
					}

					.price {
						color: #F84442;
						// font-weight: bold;

						.number {
							font-size: 20px;
						}
					}
				}

			}

			.buttonView {
				padding: 10rpx 20rpx;
				color: #B6B6B6;
				border-radius: 10px;
				// border: #B6B6B6 solid 1px;
				font-size: 24rpx;
				font-weight: bold;
			}
		}

	}
</style>